<%--
  Created by IntelliJ IDEA.
  User: 86139
  Date: 2024/12/5
  Time: 9:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <title>用户编辑</title>
    <!-- 引入 Bootstrap CSS（这里假设已正确配置路径，实际中根据你的项目结构调整） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        /* 自定义一些样式 */
        body {
            background-color: #f4f4f4;
        }

        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        label {
            font-weight: bold;
        }

        input:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }
    </style>
</head>

<body>
<div class="container mt-5">
    <h1 class="text-center mb-4">用户编辑</h1>
    <form action="" method="post">
        <div class="mb-3">
            <label for="user_id" class="form-label">编号</label>
            <input type="text" class="form-control" id="user_id" name="user_id" value="${user.user_id}" readonly>
        </div>
        <div class="mb-3">
            <label for="user_name" class="form-label">账号</label>
            <input type="text" class="form-control" id="user_name" name="user_name" value="${user.user_name}">
        </div>
        <div class="mb-3">
            <label for="user_nickname" class="form-label">昵称</label>
            <input type="text" class="form-control" id="user_nickname" name="user_nickname" value="${user.user_nickname}">
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
        <!-- 添加的删除按钮 -->
        <button type="button" class="btn btn-danger" onclick="confirmDelete()">删除</button>
    </form>
</div>
<!-- 引入 Bootstrap JS（这里假设已正确配置路径，实际中根据你的项目结构调整，部分功能可能依赖它） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script>
    // 定义确认删除的函数
    function confirmDelete() {
        if (confirm("你确定要删除该用户吗？此操作不可撤销！")) {
            // 获取用户编号
            const userId = document.getElementById('user_id').value;
            // 跳转到删除操作对应的页面（这里假设为deleteUser.jsp，可根据实际调整），并传递用户编号参数
            window.location.href = "deleteUser.jsp?user_id=" + userId;
        }
    }
    // 当页面加载完成后
    window.addEventListener('load', function () {
        // 给账号输入框添加获取焦点时的动画效果
        const userNameInput = document.getElementById('user_name');
        userNameInput.addEventListener('focus', function () {
            this.classList.add('animate__animated', 'animate__pulse');
        });
        // 失去焦点时移除动画效果
        userNameInput.addEventListener('blur', function () {
            this.classList.remove('animate__animated', 'animate__pulse');
        });
    });
</script>
</body>

</html>